<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    一级：
    <select id="one">
        <!-- option属性：标志了选择框选中这个选项时选择框的值,通常情况下，option标签的value属性值是唯一的 -->
        <option value="0">请选择……</option>
    </select>
    二级：
    <select id="two">
        <option value="0">请选择父类</option>
    </select>
</body>

</html>
<script>
    var data = [
        {
            id: 2,
            name: '数码产品',
            categories: [
                { id: 21, name: '数据相机 ' },
                { id: 22, name: 'MP3' },
                { id: 23, name: '手机' }
            ]
        },
        {
            id: 1, // 商品父类的id值
            name: '服务',
            categories: [ // 商品子类的数据
                { id: 11, name: '笔记本' },
                { id: 12, name: '台式机' },
                { id: 13, name: '服务器' }
            ]
        },
        {
            id: 3,
            name: '无线网',
            categories: [
                { id: 31, name: '无线网卡 ' },
                { id: 32, name: '无线上网卡' }
            ]
        }
    ];
    const oneSelect = document.querySelector('#one');
    const twoSelect = document.querySelector('#two');
    // 根据data数据，添加一级下拉的待选项
    createOptions(data, oneSelect);

    // 给一级下拉绑定onchange事件
    oneSelect.onchange = function (event) {
        // 先将二级下拉的选项删除到最后一个
        // 下拉框的length属性，表示当前下拉框的选项个数
        twoSelect.length = 1;
        // 输出详细信息 console.dir
        // selectedIndex    下拉框选中项的索引
        // 获取选中的option
        const optionDom = event.target[event.target.selectedIndex];
        console.log(optionDom);
        // 循环元素对象中的myCategories属性，创建二级菜单
        createOptions(optionDom.myCategories, twoSelect);
    }



    function createOptions(data, faDom) {
        // 防止data为undefined时代码报错
        // 方案1
        // data =
        //     data === undefined ?
        //         []
        //         :
        //         data;

        // 方案2
        if(data === undefined) return;

        data.forEach(function (val) {
            const optionDom = document.createElement('option');
            optionDom.innerText = val.name;
            optionDom.value = val.id;
            optionDom.myCategories = val.categories;
            faDom.append(optionDom);
        });
    }
</script>